<template>
  <div class="chart-box" v-loading="loading">
    <!-- 暂无数据 -->
    <noData
      v-show="!hasData"
      title="近12个月碳排放量及强度趋势分析"
      :subTitle="params.organizationName.value"
    />
    <!-- 近12个月碳排放量及强度趋势分析 - Echart -->
    <div v-show="hasData" class="chart" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, ref, watch, ComputedRef, onMounted } from 'vue';
import { useECharts } from '@/hooks/useECharts';
import { queryAnalysis } from '@/apis/eci/visualAnalysis';
import noData from '../../noData/index.vue';
import {
  queryAnalysisRes,
  queryAnalysisParams
} from '@/apis/eci/visualAnalysis/model/visualAnalysisModel';
import { kgToT } from '@/utils';
import { store } from '@/store';

interface injectParams {
  queryParams: queryAnalysisParams;
  organizationName: ComputedRef;
}

const chartRef = ref();
const loading = ref(false);
const params = inject('params') as injectParams;
const monthData = ref<queryAnalysisRes>({
  accumulateEmission: [],
  data: [],
  emissionStrength: [],
  totalEmission: []
});
const isShowChartLine = computed(() => {
  return store.state.app.globalConfig.isShowChartLine;
});
// 监听 queryParams 值如果发生变化重新发接口
watch(params.queryParams, async () => {
  loadMonthData();
});
// 是否有展示数据
const hasData = computed(() => {
  if (monthData.value.totalEmission.length !== 0) {
    return true;
  } else {
    return false;
  }
});
// 请求月排放趋势接口
const loadMonthData = async () => {
  try {
    if (params.queryParams.inventoryYear) {
      loading.value = true;
      const res: queryAnalysisRes = await queryAnalysis(params.queryParams);
      const accumulateEmission = handleArrayData(res.accumulateEmission);
      const emissionStrength = handleArrayData(res.emissionStrength);
      const totalEmission = handleArrayData(res.totalEmission);
      console.log('月碳排放趋势', res);
      monthData.value = {
        data: res.data,
        accumulateEmission,
        emissionStrength,
        totalEmission
      };
      console.log('月碳排放趋势monthData.value', monthData.value);
      // monthData.value = res;
      renderChart(); // 渲染 echarts
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  // 请求月排放趋势接口
  loadMonthData();
});
const { setOptions } = useECharts(chartRef);

function renderChart() {
  const option = monthlyTrendChart();
  setOptions(option);
}
// 月碳排放趋势 Echart
const monthlyTrendChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Temperature',
        type: 'line',
        data: [200, 22, 330, 450, 630, 102, 99]
      },
      {
        name: 'test',
        type: 'line',
        data: [120, 220, 33, 45, 330, 500, 99]
      }
    ]
  };

  return option;
};

// 处理数组数据单位
const handleArrayData = (arr: (string | number)[]) => {
  return arr.map(item => {
    return kgToT(Number(item));
  });
};
</script>

<style lang="scss" scoped>
.chart-box {
  position: relative;
  height: 320px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(67, 89, 112, 0.08);
  border-radius: 6px;

  .chart {
    width: 100%;
    height: 100%;
    &::after {
      position: absolute;
      top: 70px;
      left: 0;
      background-color: #ebeff2;
      height: 1px;
      width: 100%;
      content: '';
    }
  }
}
</style>
